function Enlarge(select){
  this.ele = document.querySelector(select)
  this.show = this.ele.querySelector('.show')
  this.mask = this.ele.querySelector('.mask')
  this.enlarge = this.ele.querySelector('.enlarge')
  this.show_width = this.show.offsetWidth
  this.show_height = this.show.offsetHeight
  this.enlarge_width = parseInt(window.getComputedStyle(this.enlarge).width)
  this.enlarge_height = parseInt(window.getComputedStyle(this.enlarge).height)
  this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
  this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])
  this.init()
}
Enlarge.prototype.init = function(){
this.setScale()
this.move()
this.overOut()
}
Enlarge.prototype.setScale = function(){
  this.mask_width=this.enlarge_width*this.show_width/this.bg_width
  this.mask_height=this.enlarge_height*this.show_height/this.bg_height
  this.mask.style.width = this.mask_width+'px'
  this.mask.style.height = this.mask_height+'px'
}
Enlarge.prototype.overOut = function(){
  this.show.addEventListener('mouseenter',()=>{
  this.mask.style.display='block'
  this.enlarge.style.display='block'
  })
  this.show.addEventListener('mouseleave',()=>{
      this.mask.style.display='none'
      this.enlarge.style.display='none'
  })
}
Enlarge.prototype.move = function(){
this.show.addEventListener('mousemove',e=>{
  e=e||window.event
  let x=e.offsetX-this.mask_width/2
  let y=e.offsetY-this.mask_height/2
  if(x<=0) x=0
  if(y<=0) y=0
  if(x>=this.show_width-this.mask_width) x=this.show_width-this.mask_width
  if(y>this.show_height-this.mask_height) y=this.show_height-this.mask_height
  this.mask.style.left=x+'px'
  this.mask.style.top=y+'px'
  const bg_x=this.bg_width/this.show_width*x
  const bg_y=this.bg_height/this.show_height*y
  this.enlarge.style.backgroundPosition=`-${ bg_x }px -${ bg_y }px`

  })
}




const title=document.querySelector(".list2>.left>ul")
title.addEventListener('click',()=>
  window.location.href="../views/list.html"
)
const list2=document.querySelector(".list2")
const mulu=document.querySelector(".mulu")
const inp=document.querySelector('.nav>.box>input')
mulu.onmouseover=function(){
    list2.classList.add("active")
}
list2.onmouseover=function(){
    list2.classList.add("active")
}
mulu.onmouseleave=function(){
    list2.classList.remove("active")
}
list2.onmouseleave=function(){
    list2.classList.remove("active")
}
inp.oninput = function () {
    const text = this.value.trim()
    const script = document.createElement('script')
    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=${ text }&req=2&csor=2&cb=fn&_=1627023610785`
    document.body.appendChild(script)
    script.remove()
  }

function fn(res) {
    if (!res.g) {
      ul.classList.remove('active')
      return
    }
    let str = ''
    res.g.forEach(item => {
      str += `<li>${ item.q }</li>`
    })
    ul.innerHTML = str
    ul.classList.add('active')
  }

  const denglu=document.querySelector(".nav>.denglu")
  const cart=document.querySelector(".nav>.cart")
  cart.addEventListener('click',()=>window.open("../views/cart.html"))
  denglu.addEventListener('click',()=>window.open("../views/login.html"))
  const onBox = document.querySelector('.on')
 const offBox = document.querySelector('.off')
 const nameBox = onBox.querySelector('.username')
 const selfBtn = document.querySelector('.self')
 const id = window.localStorage.getItem('id')

testLogin()
function testLogin() {
  const login = window.localStorage.getItem('login')
  if (login !== '1') {
    offBox.classList.add('active')
    onBox.classList.remove('active')
    return
  }

  const token = window.localStorage.getItem('token')
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
  xhr.onload = () => testHandler(xhr)
  xhr.setRequestHeader('authorization', token)
  xhr.send()
}
function testHandler(xhr) {
  const res = JSON.parse(xhr.responseText)
  console.log(res)
  if (res.code !== 1) {
    offBox.classList.add('active')
    onBox.classList.remove('active')
    denglu.classList.remove('active')
    return
  }
  nameBox.innerText = res.info.nickname
  onBox.classList.add('active')
  offBox.classList.remove('active')
  denglu.classList.add('active')

}

const logoutBtn = document.querySelector('.logout')
logoutBtn.addEventListener('click', () => {
  ajax({
    url: 'http://localhost:8888/users/logout',
    data: `id=${ id }`,
    dataType: 'json',
    success: function (res) {
      if (res.code === 1) window.location.reload()
    }
  })
})
const content = document.querySelector('.container')
const goods_id = window.sessionStorage.getItem('id')
const enlarge=document.querySelector('.enlarge')
if (!goods_id) {
  window.location.href = './list.html'
  throw new Error('没有您查看的商品详情')
}
getInfo()
async function getInfo() {
  const res = await pAjax({
    url: 'http://localhost:8888/goods/item',
    data: 'id=' + goods_id,
    dataType: 'json'
  })

  console.log(res)

  content.innerHTML = `
    
    <div class="left" id="box">
            <div class="show"">  
                <img  src="${ res.info.img_big_logo }" alt="">
               <div class="mask"></div>     
            </div>
            <div class="enlarge" style="background-image: url(${res.info.img_big_logo});background-size: 800px 800px; ")>
           </div>
        </div>
        <div class="right">
          <p class="title">${ res.info.title }</p>
          <p class="price">
            ￥ ${ res.info.current_price }
          </p>
          <p class="number">
            <button>-</button>
            <input type="text" value="1">
            <button>+</button>
          </p>
          <p>
            <button>加入购物车</button>
          </p>
        </div> 
        <div class="enlarge" >
  `
  new Enlarge('#box')
}



